<template>
    <div v-loading="loading">
        <el-tag v-for="(tag, index) in item.goodsSkusCardValue" :key="index" class="mx-1" closable :disable-transitions="false" effect="plain" @close="handleClose(tag)">
            <el-input v-model="tag.text" class="ml-[-10px] w-20" placeholder="选项值" size="small" @change="handleChange($event, tag)"></el-input>
        </el-tag>
        <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="ml-1 w-20" size="small" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
        <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput"> + 添加选项值 </el-button>
    </div>
</template>
<script setup>
import { initSkusCardItem } from '~/composables/useSku.js'

const props = defineProps({
    skuCardId: {
        type: [Number, String],
        default: 0,
    },
})

const { item, inputValue, inputVisible, InputRef, handleClose, showInput, handleInputConfirm, loading, handleChange } = initSkusCardItem(props.skuCardId)
</script>
